<template>
    <div>
        <!-- 网页头部 -->
        <el-card class="head-card">
            <i class="el-icon-s-fold"></i><span style="font-size: 18px">大健康综合管理后台</span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品系统</el-breadcrumb-item>
                <el-breadcrumb-item><strong>品类管理</strong></el-breadcrumb-item>
            </el-breadcrumb>
            <h1 style="color: #333744">品类管理</h1>
        </el-card>

        <!-- 网页中部 -->
        <el-card class="body-card">
            <h4 style="margin-top: 0">查询条件</h4>
            <el-form :inline="true" :model="condition" class="demo-form-inline">
                <el-form-item label="一级品类">
                    <!--                    需要从数据库查出来，所有品类，可以按id，名字存到缓存库-->

                    <el-select v-model="condition.categoryName" clearable placeholder="请选择">
                        <el-option
                                v-for="item in categoryNameList"
                                :key="item.id"
                                :label="item.categoryName"
                                :value="item.categoryName">
                        </el-option>
                    </el-select>

                </el-form-item>

                <el-form-item label="创建日期">
                    <el-date-picker v-model="condition.begin" type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择开始时间" :picker-options="pickerOptions" style>
                    </el-date-picker>


                    <el-form-item label="-">
                        <el-date-picker v-model="condition.end" type="datetime"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="选择结束时间" :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetting">重置</el-button>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 网页底部 -->
        <el-card class="foot-card">
            <span>
                <el-button type="primary" icon="el-icon-plus"
                           style="padding-left: 30px; padding-right: 30px;  margin-right:30px ">新增</el-button>
                <el-button type="primary" plain
                           style="padding-left: 35px; padding-right: 35px;  margin-right:30px ">下架</el-button>

            </span>
            <template>
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column prop="id" label="品类ID"></el-table-column>
                <el-table-column prop="categoryName" label="品类名称"></el-table-column>
                <el-table-column prop="sequence" label="顺序"></el-table-column>
                <el-table-column prop="parentCategoryId" label="子品类"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column label="操作">
                    <el-button type="warning" size="mini">编辑</el-button>
                    <el-button type="danger" size="mini">删除</el-button>
                    <el-button type="info" size="mini">查看</el-button>
                </el-table-column>
            </el-table>
            </template>
            <!-- 分页 -->
            <el-pagination style="margin-top: 10px;"
                           background
                           :page-sizes="[5, 10, 20]"
                           :page-size="pageBean.size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="pageBean.count"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="pageBean.current">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>

    export default {
        name: "Category",
        data() {
            return {
                categoryNameList: [],
                pickerOptions: {},
                condition: {
                    categoryName: "",
                    begin: "",
                    end: "",
                    page: 1,
                    size: 5
                },
                pageBean: {},

                pageNum: 1,
                pageSize: 5,
                total: 0,
                //表格数据
                tableData: [],
                //复选框
                multipleSelection: []
            }

        },
        methods: {


            search() {
                if (this.condition.categoryName == '' && this.condition.begin == '' && this.condition.end == '') {
                    this.$message.warning("请输入搜索条件");
                    return;
                }
                this.pageNum = 1;
                this.findByCondition();
            },

            findByCondition() {
                this.$axios.post(`/category/findByCondition`, this.condition).then(resp => {
                    console.log('resp', resp)
                    this.pageBean = resp.data;
                    this.tableData = this.pageBean.list;

                });
            },
            findAllCategoryName() {
                this.$axios.get('/category/findAllCategoryName').then(resp => {
                    // 将服务器返回的数据解析并赋值给 options 数组
                    this.categoryNameList = resp.data.data;
                }).catch(error => {
                    console.error(error);
                });
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            resetting() {
                this.condition.page = 1;
                this.condition.size = 5;
                this.condition.categoryName = '';
                this.condition.begin = '';
                this.condition.end = '';
                this.findByCondition();
            },
            onSubmit() {
                console.log('submit!');
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.reloadData();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.reloadData();
            },

            reloadData() {
                this.$axios.get("/category/findAll", {
                    params: {
                        pageSize: this.pageSize,
                        pageNum: this.pageNum,
                        // name: this.name
                    }
                }).then(res => {
                    console.log("", res);
                    this.total = res.data.data.total;
                    this.tableData = res.data.data.records;
                })
            },

            dateFormatter(row, column, cellValue) {

                // 将时间戳转换为可读格式
// 将时间戳转换为可读格式
                let date = new Date(cellValue);
                let year = date.getFullYear();
                let month = ("0" + (date.getMonth() + 1)).slice(-2);
                let day = ("0" + date.getDate()).slice(-2);
                let hours = ("0" + date.getHours()).slice(-2);
                let minutes = ("0" + date.getMinutes()).slice(-2);
                let seconds = ("0" + date.getSeconds()).slice(-2);
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

            },


        }, created() {
            // this.fetchCategories();
            // this.reloadData();
            this.findByCondition();
            this.findAllCategoryName();
        },
    }

</script>

<style scoped>
    .head-card {
        text-align: left;
        padding-left: 18px;
        height: 160px;

    }

    .el-icon-s-fold {
        font-size: 23px;
        margin-right: 10px;
        margin-bottom: 40px;
    }

    .body-card {
        text-align: left;
        padding-left: 18px;
        width: 90%;
        display: block;
        margin: 30px auto;
        height: 130px;
        padding-bottom: 20px;
    }

    .foot-card {
        text-align: left;
        padding-left: 18px;
        width: 90%;
        display: block;
        margin: 0 auto;
    }

    .el-button {

    }
</style>